<template>
<div class="note-demo-child-box">
	<el-button @click='fn2'>点击子组件函数</el-button>
	<div>childData:{{childData.age}}:{{childData.level}}</div>
	<div>parentData:{{parentData.id}}:{{parentData.name}}</div>
</div>
</template>
<script setup>
import { reactive } from 'vue'
//接受父组件变量:parentData
defineProps({
	parentData: Object
});
//接收父类函数 parentFn1
const $emit = defineEmits(['parentFn1']);
//子组件变量 childData
const childData = reactive({
	age: 99,
	level: '魂帝',
});
//供父级调用
const childFn1 = (params) => {
	console.log('childFn1', '接收到子组件变量 parentData', params);
};
const fn2 = () => {
	console.log('fn2');
	//在[子组件]调用[父组件]方法
	$emit('parentFn1', childData);
};
//将子组件的 childFn1 方法提供给父组件调用
defineExpose({
	childFn1,
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>